{% load static %}
<!DOCTYPE html>
{% if not request.user.is_authenticated %}
<html class="{{ DEFAULT_THEME }}" data-theme="{{ DEFAULT_THEME_COLOR }}" lang="en">
{% else %}
<html class="{{ request.user.profile.dark_mode_str }}" data-theme="{{ request.user.profile.theme_color }}" lang="en">
<!--<html class="creme" data-theme="{{ request.user.profile.theme_color }}" lang="en">-->
{% endif %}
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PdfDing</title>
    <link rel="icon" type="image/x-icon" href="{% static 'images/logo_with_circle.svg' %}">
    <script src="{% static 'js/alpine.min.js' %}" defer></script>
    <script src="{% static 'js/htmx.min.js' %}" defer></script>
    <link href="{% static 'css/tailwind.css' %}" rel="stylesheet">
    <style>
        [x-cloak] {
            display: none !important;
        }
    </style>
    {% if request.user.profile.theme_color == 'Custom' %}
    <style>
        html[data-theme="Custom"] {
          --color-primary: {{ request.user.profile.custom_theme_color }};
          --color-secondary: {{ request.user.profile.custom_theme_color_secondary }};
        }
    </style>
    {% endif %}
</head>
<content class="flex flex-col">
    {% include 'includes/header.html' %}

    <body class="bg-slate-50 dark:bg-slate-900 creme:bg-creme text-slate-800 dark:text-slate-200 creme:text-stone-700 h-full">
        {% include 'includes/messages.html' %}

        {% block layout %}
        {% endblock %}
    </body>
</content>
</html>
